<script setup>
  import { onMounted } from 'vue'

  // 等页面组件挂载完毕后，在获取节点信息
  onMounted(() => {
    // 创建节点查询器
    const selectorQuer = uni.createSelectorQuery()
    // 查找节点并获取元素大小，以像素为单位
    selectorQuer.select('.box').boundingClientRect((info) => {
      console.log(`盒子宽度：${info.width}px,盒子高度：${info.height}px`)
    })

    // 查询全部节点
    selectorQuer.selectAll('.box').boundingClientRect((info) => {
      console.log('查询多个节点信息', info)
    })
    // 查询视口信息
    selectorQuer.selectViewport().boundingClientRect((info) => {
      console.log('查询视口信息', info)
    })
    // 必须执行后生效
    selectorQuer.exec()
  })
</script>

<template>
  <view>
    <view class="box">盒子1</view>
    <view class="box">盒子2</view>

    <!-- 直接使用自定义组件 -->
    <custom-tabs></custom-tabs>

    <custom-form></custom-form>
  </view>
</template>

<style>
  .box {
    width: 200rpx;
    height: 200rpx;
    background-color: pink;
  }
</style>
